import pkIcon from '@/assets/icon_pk.png';
import { GamePointRank } from '@/services/game/GameController';
import { Card, Col, Flex, Modal, Row, Typography } from 'antd';
import { List } from 'antd/lib';
import React, { PropsWithChildren } from 'react';
/**
 * 赛事信息-队伍PK信息记录
 */

interface Props {
  team?: GamePointRank;
  gameId?: string;
  modalVisible: boolean;
  onCancel: (colse: boolean) => void;
}

const GameTeamPKView: React.FC<PropsWithChildren<Props>> = (props) => {
  const { modalVisible, onCancel, team } = props;
  const [pkList, setPkList] = React.useState<any[]>([]);
  React.useEffect(() => {}, []);
  return (
    <Modal
      open={modalVisible}
      onCancel={() => onCancel(false)}
      footer={null}
      width="40%"
      height="100%"
      title="PK信息"
      style={{ padding: 0, top: 10, alignItems: 'center' }}
    >
      <Card>
        <Typography.Text>排名：{team?.rankIndex}</Typography.Text>
        <Row justify="space-between" align="middle">
          <Col span={8}>
            <Typography.Text>队伍：{team?.team.teamCode}</Typography.Text>
          </Col>
          <Col span={8}>
            <Typography.Text>
              {team?.team.teamPerson.playerName}/
              {team?.team.teamPerson2.playerName}
            </Typography.Text>
          </Col>
          <Col span={8}>
            <Typography.Text>总积分:{team?.team.teamPoints}</Typography.Text>
          </Col>
        </Row>
      </Card>
      <List itemLayout="vertical">
        <List.Item>
          <Card>
            <Row justify="center" align="middle">
              <Typography.Text>第2轮</Typography.Text>
            </Row>
            <Row justify="space-between" align="middle">
              <Col span={2}>
                <Typography.Text>桌号：9</Typography.Text>
              </Col>
              <Col>
                <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
                  <Typography.Title level={4}>A</Typography.Title>
                  <Typography.Text>
                    <Typography.Text strong>东</Typography.Text> 张三
                  </Typography.Text>
                  <Typography.Text>
                    <Typography.Text strong>西</Typography.Text> 张三
                  </Typography.Text>
                </Flex>
              </Col>
              <Col span={2}>
                <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
                  <img src={pkIcon} style={{ width: 30, height: 30 }} />
                  <Typography.Text
                    strong
                    style={{ fontSize: 16, color: 'red' }}
                  >
                    胜
                  </Typography.Text>
                </Flex>
              </Col>
              <Col>
                <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
                  <Typography.Title level={4}>A</Typography.Title>
                  <Typography.Text>
                    <Typography.Text strong>东</Typography.Text> 张三
                  </Typography.Text>
                  <Typography.Text>
                    <Typography.Text strong>西</Typography.Text> 张三
                  </Typography.Text>
                </Flex>
              </Col>
              <Col span={2} flex={1}>
                <Typography.Text>积分:30</Typography.Text>
              </Col>
            </Row>
          </Card>
        </List.Item>
      </List>
    </Modal>
  );
};
export default GameTeamPKView;
